<template>
  <el-container>
<!-- header -->
  <el-header>

    <!-- 面包屑 -->
     <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/projects">项目</a></el-breadcrumb-item>
  </el-breadcrumb>
  <br>
  <!-- 创建项目 -->
  <el-row :gutter="30">
    <!-- <el-col :span="2"><div class="grid-content bg-purple">
      搜索成员
    </div></el-col> -->

    <el-col :span="10"><div class="grid-content bg-purple">
      <el-input v-model="projectName" placeholder="请输入新建项目名称"></el-input>
    </div></el-col>

      
    <!-- <el-col :span="3"><div class="grid-content bg-purple">
      <el-button round type="primary" @click="invite">邀请加入</el-button>
    </div></el-col> -->

      
    <el-col :span="2"><div class="grid-content bg-purple">
      <el-button round  type="primary" @click="createProject">创建项目</el-button>
    </div></el-col>
  </el-row> 
  <br>
  <!-- 搜索项目并排序 -->
  <el-row :gutter="10" class="secondRow">
    <el-col :span="9" :offset="0">
      <!-- <el-input
        placeholder="搜索团队"
        prefix-icon="el-icon-circle-plus-outline"
        v-model="searchName"
      >
      </el-input> -->
      <el-input placeholder="搜索项目" v-model="searchName" class="input-with-select" clearable @clear='getProjectList'>
        <el-button slot="append" type="info" plain icon="el-icon-search" @click="getProjectList"></el-button>
      </el-input>
    </el-col>
    <el-col :span="5" :offset="1">
      <!-- <el-button type="primary" @click="createGroup">创建团队</el-button> -->
      <el-select v-model="sort" placeholder="选择排序方式">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="4">
      <el-button type="primary" @click="getProjectList" width="100">进行排序</el-button>
    </el-col>
  </el-row>

    <!-- 新建项目
    <el-button type="primary" @click="dialogFormVisible = true">新建项目</el-button>
    <el-dialog title="新建项目" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="项目名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="项目类型" :label-width="formLabelWidth">
      <el-select v-model="form.type" placeholder="请选择项目类型">
        <el-option label="Java" value="shanghai"></el-option>
        <el-option label="C++" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addProject">确 定</el-button>
  </div>
</el-dialog> -->

  </el-header>


<!-- el-dialog 平时不可见 在点击改名称时跳出-->
<el-dialog
  title="请输入新名称"
  :visible.sync="dialogVisible" 
  width="30%"
  :modal-append-to-body="false" 
  @close="dialogclose"
  :before-close="handleClose">
  <span>

  <el-input  v-model="name" placeholder="请输入内容"></el-input>

  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="changeName">确 定</el-button>
  </span>
</el-dialog>

  
  <el-main>
  <h1>
      全部项目
    </h1>

    <el-table :data="projectList" border stripe height="500px">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="项目名称" prop="proname"></el-table-column>
      <el-table-column label="创建时间" prop="prosettime"></el-table-column>
      <!-- <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="身份" prop="isadmin">
        <template slot-scope="scope">
          {{role[parseInt(scope.row.isadmin)]}}
        </template>
      </el-table-column> -->
      <el-table-column label="操作" width="240">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="进入项目" placement="top" :enterable="false" >
            <el-button type="primary" icon="el-icon-right" size="medium" round @click="enterProject(scope.row.token)"></el-button>
          </el-tooltip>
          <!-- <el-tooltip effect="dark" content="任命为管理员" placement="top" :enterable="false" >
            <el-button type="primary" icon="el-icon-user" size="small" round @click="roleChange(scope.row.uid, '1')"></el-button>
          </el-tooltip> -->

          <el-tooltip effect="dark" content="复制项目" placement="top" :enterable="false" >
            <el-button type="primary" plain icon="el-icon-plus" size="small" round @click="copyProject(scope.row.token, scope.row.proname, scope.row.location)"></el-button>
          </el-tooltip>

          <el-tooltip  effect="dark" content="重命名" placement="top" :enterable="false" >
            <el-button type="info" plain icon="el-icon-edit" size="small" round @click="renameProject(scope.row.token)"></el-button>
          </el-tooltip>


          <el-tooltip effect="dark" content="删除项目" placement="top" :enterable="false">
          <el-button type="danger" icon="el-icon-delete" size="small" round @click="handleDeleteProject(scope.row.token, scope.row.proname)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>


  <!-- <el-table
      :data="tableData"
      style="width: 100%">

      <el-table-column
        prop="name"
        label="项目名称"
        width="300">
      </el-table-column>

       <el-table-column
        prop="type"
        label="项目类型"
        width="300">
      </el-table-column>

      <el-table-column
      fixed="right"
      label="操作"
      width="400">

      <template slot-scope="scope">

      <el-button  @click="jump1" type="text" size="small">项目详情页</el-button>


      <el-button @click="Click2(scope.$index)" type="text" size="small">重命名</el-button>
      
      <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">删除</el-button>
      
      </template>
      
      </el-table-column>
    
    </el-table> -->
  
  </el-main>

</el-container>

</template>

<script>
import qs from "qs"
export default {
  methods: {
    //触发重命名项目对话框
    renameProject(token){
      this.dialogVisible=true;
      this.protokenTmp=token;
    },
    changeName(){
      if (this.name === ''){
        this.$message.warning("请输入修改的项目名称！");
        return;
      }
      this.dialogVisible=false;
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      //console.log(this.usertoken);
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/projects/rename" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          newname: this.name,
          protoken: this.protokenTmp,
          usertoken: usertoken,
          teamtoken: teamtoken,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          this.getProjectList();
        }
      });
    },

    Click1(row) {
      
    },

    Click2(index) {
      this.dialogVisible=true;
      this.index=index;
    },

    Click4(row) {
      console.log(row);
      alert();
    },

    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    
    dialogclose(){
      this.name='',
      this.dialogVisible=false
    },
    handleClose(){
      this.dialogVisible=false
    },
    addProject(){
        this.dialogFormVisible = false
        this.name=this.form.name
        this.type=this.form.type
        this.tableData.push({name:this.name,type:this.type})
        alert("新项目"+this.name+"已添加")
        this.name=''
        this.form.name=''
    },
    jump1(){
      //跳转至项目详情页面
      setTimeout(() => {this.$router.push("/dynamic")}, 10);
      // window.open('http://localhost:8080/dynamic')
    },

    //获取项目列表
    getProjectList() {
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      //console.log(this.$store.getters.getProject.project.projecttoken);
      //console.log(this.usertoken);
      // console.log(this.sort);
      // console.log(this.searchName);
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/projects/list" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          usertoken: usertoken,
          teamtoken: teamtoken,
          sort: this.sort,
          search: this.searchName,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.projectList = res.data.message;
        }
      });
    },

    //创建项目
    createProject(){
      // 检查创建项目名称是否有填写内容
      if (this.projectName === '') {
        this.$message.warning("请输入创建项目名称！");
        return;
      }
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/projects/create" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          projectname: this.projectName,
          usertoken: usertoken,
          teamtoken: teamtoken,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          this.projectName = '';
          //创建项目后刷新项目列表
          this.getProjectList();
        }
      });
    },

    //点击进入项目后跳转
    enterProject(token){
      //存储项目token
      //console.log(token);
      this.$store.dispatch('saveProjectInfo', {
            project: {
              'projecttoken': token,
            }
          });
      //跳转至项目页面
      setTimeout(() => {this.$router.push("/graphdesign")}, 10);
    },

    //删除项目
    deleteProject(token){
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/projects/drop" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          protoken: token,
          usertoken: usertoken,
          teamtoken: teamtoken,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          //删除项目后刷新项目列表
          this.getProjectList();
        }
      });
    },

    //复制项目
    copyProject(token, name, location){
      const usertoken = this.$store.getters.getUser.user.usertoken;
      const teamtoken = this.$store.getters.getGroup.group.grouptoken;
      this.$axios({
        method: "post" /* 指明请求方式，可以是 get 或 post */,
        url: "/projects/copy" /* 指明后端 api 路径，由于在 main.js 已指定根路径，因此在此处只需写相对路由 */,
        data: qs.stringify({
          /* 需要向后端传输的数据，此处使用 qs.stringify 将 json 数据序列化以发送后端 */
          projectname: name,
          location: location,
          protoken: token,
          usertoken: usertoken,
          teamtoken: teamtoken,
        }),
      })
      .then((res) => {
        /* res 是 response 的缩写 */
        console.log(res.data);
        if(!res.data.success){
          this.$message.error(res.data.message);
        }
        else{
          this.$message.success(res.data.message);
          //复制项目后刷新项目列表
          this.getProjectList();
        }
      });
    },

    //弹出对话框，确认是否将项目移入回收站
    handleDeleteProject(token, proname) {
      this.$confirm('您确认要将项目: ' + proname + ' 移入回收站吗？')
        .then(_ => {
          this.deleteProject(token);
        })
        .catch(_ => {});
    }



  },

  data() {
    return {
      //项目列表
      projectList: [],
      //新建项目框中名称
      projectName: '',
      //重命名时使用的临时项目token
      protokenTmp: '',
      //重命名对话框关联的姓名
      name:'',
      //搜索项目名称
      searchName: "",
      //选择器备选排序方式
      options: [{
          value: 'name',
          label: '项目名称'
        }, {
          value: 'time',
          label: '创建时间'
        }],
      //选择器中的值（排序选项）
      sort: '',


      tableData: [{
        name: '暑假软件实践',
        type:'Java'
      },
      {
        name: '寒假软件实践',
        type:'C++'
      }],
      
      type:'',
      index:0,
    dialogVisible: false,
    input:'',
    dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: '',
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    };
  },

  created(){
    //创建页面时更新项目列表
    this.getProjectList();
  }
}

</script>

<style>
h1{
  text-align: left;
}
</style>